<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            background-color: skyblue;
        }
        .cover {
            position: relative;
            top: 30px;
            left: 80px;
            top: 20px;
            width: 900px;
            height: 450px;
            box-shadow: 10px 10px 10px 10px rgba(14, 192, 139, 0.9);
            background-color: #05e097;
            border-radius: 30px;
        }

        .add,
        .delete,
        .change,
        .query {
            width: 200px;
            height: 150px;
            position: absolute;
        }

        .add {
            left: 150px;
            top: 50px;
        }

        .change {
            right: 150px;
            top: 50px;
        }

        .delete {
            left: 150px;
            bottom: 50px;
        }

        .query {
            right: 150px;
            bottom: 50px;
        }

        img {
            width: 200px;
            height: 150px;
        }

        img:hover {
            cursor: pointer;
            width: 220px;
            height: 165px;
        }

        a {
            text-decoration: none;
            font-size: 20px;
            position: relative;
            left: 62px;
            color: white;
        }
    </style>
</head>
<body>
<div class="cover">
    <div class="add">
        <img src="./image/t1.jpg" alt="image">
        <a href="addBooks.jsp">添加图书</a>
    </div>
    <div class="delete">
        <img src="./image/t2.jpg" alt="image">
        <a href="BookServlet?method=queryBooks">删除图书</a>
    </div>
    <div class="change"><img src="./image/t3.jpg" alt="image">
        <a href="changeBook.jsp">修改图书</a>
    </div>
    <div class="query"><img src="./image/t1.jpg" alt="image">
        <a href="BookServlet?method=queryBooks">查询图书</a>
    </div>
</div>
</body>
</html>
